<template>
    <div id="features">
        <div class="top">
            <div class="title">{{title}}</div>
            <div class="statistics">
                <div class="item" :key="index" v-for="(item, index) in statistics">
                    <p v-if="item.unit.split('-').length > 1" class="number"><span :style="item.numberStyle">{{item.unit.split('-')[0]}}{{item.number}}</span><span :style="item.unitStyle">{{item.unit.split('-')[1]}}</span></p>
                    <p class="number" v-else><span :style="item.numberStyle">{{item.number}}</span><span :style="item.unitStyle">{{item.unit}}</span></p>
                    <p class="desc">{{item.desc}}</p>
                </div>
            </div>
        </div>
        <div class="list">
            <div @mouseenter="enter(index)" @mouseleave="leave" :key="index" v-for="(item, index) in list" :class="['item', index ? 'ml-48' : '', index === activeIndex ? 'move-block-in' : 'move-block-out']" :style="{padding: `${(1200/list.length) * (7/40)}px 28px`}">
                <div class="icon" :style="{width: `${(1200/list.length) * (11/40)}px`, height: `${(1200/list.length) * (11/40)}px`}">
                    <img :style="{width: `${(1200/list.length) * (9/40)}px`, height: `${(1200/list.length) * (9/40)}px`}" :src="item.icon" alt="icon">
                </div>
                <p class="label" :style="{ color: index === activeIndex ? '#fff' : '#333' }">{{item.label}}</p>
                <p class="desc" :style="{ color: index === activeIndex ? '#fff' : '#999' }">{{item.desc}}</p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        title: {
            type: String,
            default: ''
        },
        statistics: {
            type: Array,
            default: [],
            required: false
        },
        list: {
            type: Object,
            default: []
        },
    },
    data() {
        return {
            activeIndex: '0',
            transName: ''
        }
    },
    components: {
        'menu-item': {
            props: ['item', 'index'],
            template: `<client-only><el-menu-item :index="index" :key="index">{{item.label}}</el-menu-item></client-only>`
        }
    },
    methods: {
        handleSelect(e) {
            console.log(e)
        },
        enter(index) {
            this.activeIndex = index;
        },
        leave() {
            this.activeIndex = null;
        }
    }
}
</script>

<style lang="scss" scoped>
#features {
    width: 1250px;
    margin: 0 auto;
    padding: 80px 0;
    box-sizing: border-box;
    text-align: center;
    .title {
        width: 100%;
        color: #333333;
        font-size: 36px;
        margin-bottom: 43px;
    }
    .statistics {
        width: 100%;
        display: flex;
        margin-top: 45px;
        margin-bottom: 54px;
        .item {
            flex: 1;
            text-align: center;
            .number {
                font-family: DINAlternate-Bold;
                font-size: 68px;
                color: #4574F7;
                line-height: 68px;
            }
            .desc {
                margin-top: 20px;
                font-family: AdobeHeitiStd-Regular;
                font-size: 16px;
                color: #999999;
                line-height: 16px;
            }
        }
    }
    .list {
        margin-top: 37px;
        display: flex;
        .item {
            flex: 1;
            box-sizing: border-box;
            border: 2px solid #EBEBEB;
            box-sizing: border-box;
            border-radius: 2px;
            transition: all .2s linear;
            position: relative;
            .icon {
                margin: 0 auto;
                border-radius: 50%;
                box-sizing: border-box;
                border: 2px solid #EBEBEB;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .label {
                color: #333333;
                font-size: 20px;
                line-height: 20px;
                margin-top: 40px;
                font-weight: 600;
            }
            .desc {
                color: #999999;
                font-size: 16px;
                line-height: 26px;
                margin-top: 20px;
            }
        }
    }
    .ml-48 {
        margin-left: 48px;
    }
    .move-block-in {
        background: #3260D4;
        top: -10px;
        .item {
            border-color: #fff;
            .label {
                font-size: 22px;
                color: #fff!important;
            }
            .desc {
                font-size: 18px;
                color: #fff!important;
            }
        }
    }
    .move-block-out {
        background: #fff;
        top: 0px;
        .item {
            border-color: #EBEBEB;
            .label {
                font-size: 20px;
                color: #333333;
            }
            .desc {
                font-size: 16px;
                color: #999999;
            }
        }
    }
}
</style>